<template>
  <div class="user-manage-page">
    <PageHeader title="好友管理" backPath="/dawn/dashboard/root"></PageHeader>

    <!-- 功能卡片列表 -->
    <div class="card-list">
      <div 
        v-for="(item, index) in menuList" 
        :key="index" 
        class="function-item" 
        @click="item.action"
      >
        <span class="function-item-icon">
          <van-icon :name="item.icon" />
        </span>
        <span class="function-item-text">{{ item.title }}</span>
        <span class="function-item-arrow">
          <van-icon name="arrow" />
        </span>
      </div>
    </div>

    <!-- 用户列表和批量操作 -->
    <div class="list-actions">
      <div class="select-all">
        <van-checkbox v-model="isAllSelected" @click="toggleSelectAll">全选</van-checkbox>
        <span class="selected-count" v-if="selectedUsers.length > 0">
          已选择 {{ selectedUsers.length }} 项
        </span>
      </div>
      <div class="action-buttons">
        <van-button 
          type="danger" 
          size="small" 
          :disabled="selectedUsers.length === 0"
          @click="confirmDelete"
        >
          删除选中
        </van-button>
      </div>
    </div>

    <div class="user-list-title">用户列表</div>
    <div class="user-list">
      <!-- 加载状态 -->
      <div class="loading-container" v-if="loading">
        <van-loading type="spinner" color="#1989fa" />
        <span class="loading-text">加载中...</span>
      </div>

      <!-- 错误提示 -->
      <div class="error-container" v-else-if="error">
        <van-icon name="warning-o" class="error-icon" />
        <span class="error-text">{{ error }}</span>
        <van-button size="small" @click="fetchUserList" class="retry-button">重试</van-button>
      </div>

      <!-- 空状态 -->
      <div class="empty-container" v-else-if="userList.length === 0">
        <van-icon name="info-o" class="empty-icon" />
        <span class="empty-text">暂无用户数据</span>
      </div>

      <!-- 用户列表 -->
      <div class="user-item" v-else v-for="(user, index) in userList" :key="user.id">
        <div class="user-item-checkbox">
          <van-checkbox v-model="user.selected" @click.stop />
        </div>
        <div class="user-item-content">
          <div class="user-item-info">
            <div class="user-item-header">
              <span class="user-item-number">{{ (currentPage - 1) * pageSize + index + 1 }}</span>
              <span class="user-item-name">{{ user.name }}</span>
              <span class="user-item-status" :class="{
                'status-active': user.status === 0,
                'status-inactive': user.status === 1
              }">
                {{ user.status === 0 ? '已关注' : '未关注' }}
              </span>
            </div>
            
            <!-- 基本信息 -->
            <div class="user-item-info-list">
              <div class="info-item">
                <van-icon name="clock" class="info-icon" />
                <span class="info-label">创建时间:</span>
                <span class="info-value">{{ user.createTime }}</span>
              </div>
              <div class="info-item" v-if="user.token">
                <van-icon name="certificate" class="info-icon" />
                <span class="info-label">Token:</span>
                <span class="info-value">{{ user.token }}</span>
              </div>
              <div class="info-item" v-if="user.appName">
                <van-icon name="apps-o" class="info-icon" />
                <span class="info-label">应用名称:</span>
                <span class="info-value">{{ user.appName }}</span>
              </div>
              <div class="info-item" v-if="user.appId">
                <van-icon name="bar-code" class="info-icon" />
                <span class="info-label">应用ID:</span>
                <span class="info-value">{{ user.appId }}</span>
              </div>
              <div class="info-item" v-if="user.friendId">
                <van-icon name="contact" class="info-icon" />
                <span class="info-label">好友ID:</span>
                <span class="info-value">{{ user.friendId }}</span>
              </div>
              <div class="info-item" v-if="user.remark">
                <van-icon name="comment-o" class="info-icon" />
                <span class="info-label">备注:</span>
                <span class="info-value">{{ user.remark }}</span>
              </div>
            </div>
          </div>
          <div class="user-item-actions">
            <van-button size="small" type="primary" @click.stop="editUser(user)" plain>编辑</van-button>
            <van-button size="small" type="danger" @click.stop="confirmDeleteSingle(user)" plain>删除</van-button>
          </div>
        </div>
      </div>
      
      <!-- 分页组件 -->
      <div class="pagination-wrapper" v-if="userList.length > 0">
        <Pagination 
          :current-page="currentPage" 
          :total-pages="totalPages" 
          :total="total"
          @page-change="handlePageChange" 
        />
      </div>
    </div>
    
    <!-- 添加用户弹窗 -->
    <van-popup
      v-model:show="showAddUserPopup"
      :closeable="true"
      round
      position="bottom"
      :style="{ height: '70%' }"
      @close="closeableshowAddUserPopup"
    >
      <div class="popup-content">
        <div class="popup-header">
          <h3>添加好友</h3>
        </div>
        
        <div class="qr-code-section">
          <div class="section-title">扫描下方二维码添加好友</div>
          <QrCodeComponent 
            :apiFunction="getQrCode"
            @qrCodeLoaded="handleQrCodeLoaded"
          />
          <div class="qr-code-tips">
            扫码关注后，将在列表中显示
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 删除确认对话框 -->
    <van-dialog
      v-model:show="showDeleteDialog"
      title="删除确认"
      confirm-button-text="确认删除"
      show-cancel-button
      @confirm="deleteSelectedUsers"
    >
      <div class="dialog-content">
        <p>确定要删除选中的 <span class="highlight">{{ selectedUsers.length }}</span> 个用户吗？</p>
        <p class="warning">此操作不可撤销！</p>
      </div>
    </van-dialog>

    <!-- 单个用户删除确认对话框 -->
    <van-dialog
      v-model:show="showSingleDeleteDialog"
      title="删除确认"
      confirm-button-text="确认删除"
      show-cancel-button
      @confirm="deleteSingleUser"
    >
      <div class="dialog-content">
        <p>确定要删除用户 <span class="highlight">{{ userToDelete?.name }}</span> 吗？</p>
        <p class="warning">此操作不可撤销！</p>
      </div>
    </van-dialog>

    <!-- 状态更改确认对话框 -->
    <van-dialog
      v-model:show="showStatusDialog"
      :title="targetStatus === 0 ? '关注确认' : '取消关注确认'"
      :confirm-button-text="targetStatus === 0 ? '确认关注' : '确认取消关注'"
      show-cancel-button
      @confirm="toggleUserStatus"
    >
      <div class="dialog-content">
        <p>确定要{{ targetStatus === 0 ? '关注' : '取消关注' }}用户 <span class="highlight">{{ userToToggle?.name }}</span> 吗？</p>
      </div>
    </van-dialog>

    <!-- 批量操作确认对话框 -->
    <van-dialog
      v-model:show="showBatchActionDialog"
      :title="batchActionTitle"
      :confirm-button-text="batchActionConfirmText"
      show-cancel-button
      @confirm="executeBatchAction"
    >
      <div class="dialog-content">
        <p>确定要{{ batchActionDesc }}选中的 <span class="highlight">{{ selectedUsers.length }}</span> 个用户吗？</p>
      </div>
    </van-dialog>

    <!-- 编辑用户弹窗 -->
    <van-popup
      v-model:show="showEditPopup"
      closeable
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="edit-popup-content">
        <div class="edit-popup-header">
          <h3>编辑好友备注</h3>
        </div>
        <div class="edit-form">
          <div class="friend-info">
            <p class="friend-name">{{ userToEdit?.name }}</p>
            <p class="friend-app" v-if="userToEdit?.appName">{{ userToEdit?.appName }}</p>
          </div>
          
          <van-field
            v-model="editForm.remark"
            label="备注"
            placeholder="请输入备注"
            :error="!!editFormErrors.remark"
            :error-message="editFormErrors.remark"
          />
          
          <div class="edit-form-actions">
            <van-button type="primary" block @click="submitEditForm">保存修改</van-button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import PageHeader from '@/Pages/compontents/PageHeader.vue'
import Pagination from '@/Pages/compontents/Pagination.vue'
import QrCodeComponent from '@/Pages/compontents/QrCodeComponent.vue'
import request from '@/utils/request'
import apiUrls from '@/config/apiUrls'
import { 
  showToast, 
  showConfirmDialog, 
  Checkbox as VanCheckbox, 
  CheckboxGroup as VanCheckboxGroup,
  Icon as VanIcon, 
  Field as VanField, 
  Button as VanButton,
  Popup as VanPopup,
  Dialog as VanDialog,
  Loading as VanLoading,
  Tag as VanTag
} from 'vant'
import { data } from 'autoprefixer'

// 使用script setup时不需要注册组件，因为Vant组件已经是全局注册的
// 如果多选框仍然不显示，可能需要检查Vant库是否正确安装和初始化

const showDeleteDialog = ref(false)
const showSingleDeleteDialog = ref(false)


// 初始化用户列表，为一个空数组，将从API获取数据
const userList = ref([])
const loading = ref(false)
const error = ref(null)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 获取二维码的API函数封装
const getQrCode = () => {
  return request.get(apiUrls.push.getQrCode)
}

// 处理二维码加载完成事件
const handleQrCodeLoaded = (data) => {
  console.log('二维码加载完成:', data)
}

const closeableshowAddUserPopup = ()=>{
  fetchUserList()
}


// 从服务器获取用户列表
const fetchUserList = async () => {
  loading.value = true
  error.value = null
  
  try {
    // 构建请求参数
    const params = {
      current: currentPage.value,
      pageSize: pageSize.value
    }
    
    // 实际API请求，添加分页参数和筛选参数
    const response = await request.get(apiUrls.root.getAllfriend, { params })
    console.log(response);
    
    // 处理API返回的数据
    if (response.code === 200 && response.data) {
      // 设置分页数据
      total.value = response.data.total || 0
      currentPage.value = response.data.pageNum || 1
      pageSize.value = response.data.pageSize || 5
      
      // 处理列表数据
      userList.value = (response.data.list || []).map(item => {
        return {
          id: item.id,
          name: item.nickName,
          token: item.token,
          isFollow: item.isFollow,
          createTime: item.createTime,
          havePhone: item.havePhone,
          emailStatus: item.emailStatus,
          remark: item.remark,
          friendId: item.friendId,
          appId: item.appId,
          appName: item.appName,
          headImgUrl: item.headImgUrl,
          selected: false, // 用于复选框选择
          status: item.isFollow === 1 ? 0 : 1 // 使用isFollow字段判断状态，1表示已关注（正常），否则为禁用
        }
      })
    } else {
      throw new Error('获取好友列表失败: ' + (response.message || '未知错误'));
    }
  } catch (err) {
    console.error('获取好友列表失败:', err)
    error.value = '获取好友列表失败，请重试'
    showToast('获取好友列表失败，请重试')
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchUserList()
}

// 在组件挂载时获取用户数据
onMounted(() => {
  fetchUserList()
})

// 添加用户弹窗控制
const showAddUserPopup = ref(false)

// 计算已选择的用户
const selectedUsers = computed(() => {
  return userList.value.filter(user => user.selected)
})

// 计算是否全选
const isAllSelected = computed({
  get: () => {
    return userList.value.length > 0 && selectedUsers.value.length === userList.value.length
  },
  set: (value) => {
    // 这个setter是为了支持v-model双向绑定
  }
})

// 全选/取消全选
const toggleSelectAll = () => {
  const newValue = !isAllSelected.value
  userList.value.forEach(user => {
    user.selected = newValue
  })
}

const menuList = [
  {
    title: '添加用户',
    icon: 'plus',
    action: () => {
      // 打开添加用户弹窗
      showAddUserPopup.value = true
    }
  },
]

// 注册成功的回调
const handleRegisterSuccess = () => {
  showAddUserPopup.value = false
  showToast('添加用户成功')
  // 刷新用户列表
  fetchUserList()
}

// 显示删除确认对话框
const confirmDelete = () => {
  if (selectedUsers.value.length > 0) {
    showDeleteDialog.value = true
  } else {
    showToast('请先选择要删除的用户')
  }
}

// 删除选中的用户
const deleteSelectedUsers = async () => {
  try {
    // const selectedIds = selectedUsers.value.map(user => user.friendId)
    
    // 调用API删除用户，使用状态码3表示删除
    const response = await request.delete(apiUrls.root.getAllfriend, {
      data: { ids: selectedUsers.value }
    })

    
    // 删除后刷新列表
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `成功删除 ${selectedIds.length} 个用户`)
  } catch (err) {
    console.error('删除用户失败:', err)
    showToast(err.response?.data?.message || '删除用户失败，请重试')
  } finally {
    // 关闭对话框
    showDeleteDialog.value = false
  }
}

const userToDelete = ref(null)

const confirmDeleteSingle = (user) => {
  userToDelete.value = user
  showSingleDeleteDialog.value = true
}

const deleteSingleUser = async () => {
  try {
    // 发送删除请求
    const response = await request.delete(apiUrls.root.getAllfriend, {
      data: {
        ids: [userToDelete.value]
      }
    })
    
    // 删除后刷新列表
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `已成功删除用户 ${userToDelete.value.name}`)
    
  } catch (error) {
    console.error('删除用户失败:', error)
    showToast(error.response?.data?.message || '删除用户失败，请重试')
  } finally {
    userToDelete.value = null
    showSingleDeleteDialog.value = false
  }
}


// 批量操作相关变量
const showBatchActionDialog = ref(false)
const batchActionTitle = ref('')
const batchActionDesc = ref('')
const batchActionConfirmText = ref('')
const batchActionStatus = ref(null)


// 执行批量操作
const executeBatchAction = async () => {
  try {
    const selectedIds = selectedUsers.value.map(user => user.friendId)
    
    const response = await request.delete(apiUrls.root.getAllfriend, {
      data: {
        data: { ids: selectedIds }
      }
    })
    
    // 刷新列表
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `成功${batchActionDesc.value}选中用户`)
  } catch (err) {
    console.error('批量操作失败:', err)
    showToast(err.response?.data?.message || '操作失败，请重试')
  } finally {
    showBatchActionDialog.value = false
  }
}

// 添加编辑相关的变量和函数
const showEditPopup = ref(false)
const userToEdit = ref(null)
const editForm = ref({
  remark: '',
})
const editFormErrors = ref({
  remark: '',
})

const editUser = (user) => {
  // 保存当前编辑的用户
  userToEdit.value = user
  
  // 将用户数据回显到表单
  editForm.value.remark = user.remark || ''
  
  // 清空表单错误
  editFormErrors.value = {
    remark: '',
  }
  
  // 显示编辑弹窗
  showEditPopup.value = true
}

const submitEditForm = async () => {
  try {
    // 准备提交的数据
    const formData = {
      id: userToEdit.value.id,
      remark: editForm.value.remark,
    }
    
    // 发送编辑请求
    const response = await request.post(apiUrls.root.getAllfriend, formData)
   
    // 刷新列表
    fetchUserList()
    
    // 显示成功信息
    showToast(response.msg || '好友备注修改成功')
    
    // 关闭弹窗
    showEditPopup.value = false
  } catch (error) {
    console.error('编辑好友备注失败:', error)
    showToast(error.response?.data?.message || '编辑好友备注失败，请重试')
  }
}
</script>

<style scoped>
.user-manage-page {
  max-width: 500px;
  margin: 0 auto;
  padding: 24px 0 40px 0;
  background: #f7f8fa;
  min-height: 100vh;
}

.card-list {
  margin: 0 16px 24px 16px;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
}

.function-item:active {
  background: #f8f8f8;
}

.function-item-icon {
  font-size: 22px;
  margin-right: 12px;
  color: #666;
}

.function-item-text {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.function-item-arrow {
  color: #ccc;
}

.user-form-card {
  display: none;
}

.list-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 16px 12px 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.select-all {
  display: flex;
  align-items: center;
}

.selected-count {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
}

.user-list-title {
  margin: 0 16px 8px 16px;
  color: #1e9fff;
  font-weight: 600;
  font-size: 16px;
}

.user-list {
  margin: 0 16px;
}

/* 用户列表项样式 - 改进移动端布局 */
.user-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.user-item-checkbox {
  margin-right: 12px;
  padding-top: 3px;
}

.user-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-item-info {
  flex: 1;
  padding-right: 0;
  margin-bottom: 12px;
}

.user-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #f2f3f5;
  border-radius: 10px;
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.user-item-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.user-item-status {
  background-color: #f2f5fa;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  font-size: 12px;
}

.user-item-details {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-detail {
  margin-right: 15px;
}

.user-item-detail .detail-label {
  font-size: 12px;
  color: #666;
}

.user-item-detail .detail-value {
  font-size: 14px;
  color: #333;
}

.user-item-actions {
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
  border-top: 1px solid #f1f1f1;
  padding-top: 10px;
}

.user-item-actions .van-button {
  margin-right: 5px;
}

.user-item-actions .van-button:first-child {
  margin-left: 0;
}

.popup-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px 16px;
}

.delete-confirm-content {
  padding: 20px;
  text-align: center;
  color: #666;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.loading-text {
  margin-left: 12px;
  font-size: 14px;
  color: #1989fa;
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.error-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #f56c6c;
}

.error-text {
  font-size: 14px;
  color: #666;
}

.retry-button {
  margin-left: 12px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.empty-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #909399;
}

.empty-text {
  font-size: 14px;
  color: #666;
}

/* 适配小屏幕手机 */
@media screen and (max-width: 370px) {
  .user-item {
    padding: 12px;
  }
  
  .user-item-checkbox {
    margin-right: 8px;
  }
  
  .function-item {
    padding: 14px 16px;
  }
  
  .user-form-card {
    padding: 12px;
  }
  
  .user-item-status {
    font-size: 11px;
    padding: 1px 6px;
  }
  
  .user-item-name {
    font-size: 15px;
  }
  
  .user-item-details {
    font-size: 12px;
  }
}

.pagination-wrapper {
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.user-item-zhjy {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-zhjy .user-item-detail {
  margin-right: 15px;
}

.user-item-no-zhjy {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-no-zhjy .van-tag {
  font-size: 12px;
  padding: 2px 8px;
}

.user-item-no-bind {
  margin-left: 8px;
}

.user-item-no-bind .van-tag {
  font-size: 12px;
  padding: 0 6px;
  height: 20px;
  line-height: 20px;
}

.user-item-details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-zhjy {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
  display: flex;
}

.user-item-col {
  flex: 1;
  min-width: 0;
}

.user-item-detail {
  margin-bottom: 5px;
  display: flex;
}

.user-item-detail .detail-label {
  font-size: 12px;
  color: #666;
  min-width: 70px;
}

.user-item-detail .detail-value {
  font-size: 13px;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.status-active {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-inactive {
  background-color: #ffebee;
  color: #f44336;
}

.status-deleted {
  background-color: #eeeeee;
  color: #9e9e9e;
}

.status-admin {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: bold;
}

.user-item-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.zhjy-section {
  font-size: 13px;
  color: #1989fa;
  font-weight: 500;
  margin-top: 8px;
  padding-left: 4px;
  border-left: 2px solid #1989fa;
}

.zhjy-item {
  margin-left: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 3px 0;
}

.info-icon {
  color: #8a8a8a;
  margin-right: 4px;
  font-size: 14px;
}

.info-label {
  font-size: 12px;
  color: #666;
  margin-right: 5px;
  min-width: 60px;
  white-space: nowrap;
}

.info-value {
  font-size: 13px;
  color: #333;
  flex: 1;
}

/* 对话框样式 */
.dialog-content {
  padding: 10px 15px;
  text-align: center;
}

.dialog-content .highlight {
  font-weight: bold;
  color: #ff7500;
}

.dialog-content .warning {
  margin-top: 10px;
  color: #ff4d4f;
  font-size: 14px;
}

/* 编辑弹窗样式 */
.edit-popup-content {
  padding: 20px;
}

.edit-popup-header {
  margin-bottom: 24px;
  text-align: center;
}

.edit-popup-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.edit-form {
  margin-bottom: 16px;
}

.edit-form-actions {
  margin-top: 24px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons .van-button {
  font-size: 12px;
}

.friend-info {
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.friend-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.friend-app {
  font-size: 14px;
  color: #666;
}

.popup-header {
  text-align: center;
  padding: 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.popup-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 500;
}

.qr-code-section {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-code-tips {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.token-section {
  padding: 20px;
  border-top: 1px dashed #f0f0f0;
}

.token-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.token-button {
  margin-top: 5px;
}
</style>